{% extends "./layout.html" %}

{% block css %}
<link rel="stylesheet" href="/css/mobile/videoDetail.css">
{% endblock %}

{% block content %}
<div class="header_container">
  {% include "./header.html" ignore missing %}
</div>
<div class="banner">
  {{video.iframe_url | safe}}
</div>
<div class="content">
  <div class="jumap">
    <button class="details button1">简介</button>
    <button class="catalog button1">目录</button>
  </div>
  <div class="data">
    <div class="introduce">
      <p class="introduction">简介</p>
      <div class="synopsis">{{video.html_intro | safe}}</div>
    </div>
    <div class="catalog">
      <ul>
        {% for video in videoList %}
        <li><a href="/videoDetail/{{video.id}}">{{video.title}}</a></li>
        {% endfor %}
      </ul>
<!--      <span>{{videolist.videoList}}</span>-->
    </div>
  </div>
</div>
{% endblock %}

{% block script %}
<script src="/js/jquery-3.6.0.min.js"></script>
<script>
  // //切换目录，详情
  $(".jumap .details").click(function () {
    $(".jumap .details").css("color", "#0090ff");
    $(".jumap .details").css("border-bottom", "3px solid #0090ff");
    $(".jumap .catalog").css("color", "black");
    $(".jumap .catalog").css("border-bottom", "3px solid white");
    $(".data .introduce").css("display", "block");
    $(".data .catalog").css("display", "none");
  })
  $(".jumap .catalog").click(function () {
    $(".jumap .catalog").css("color", "#0090ff");
    $(".jumap .catalog").css("border-bottom", "3px solid #0090ff");
    $(".jumap .details").css("color", "black");
    $(".jumap .details").css("border-bottom", "3px solid white");
    $(".data .introduce").css("display", "none");
    $(".data .catalog").css("display", "block");
  })
</script>
<!--{% if user.isvip == 1 %}-->
<!--<script>-->
<!--  let videoUrl = `{{video.video}}`-->
<!--  var player = TCPlayer("player-container-id", { // player-container-id 为播放器容器ID，必须与html中一致-->
<!--    fileID: videoUrl, // 请传入需要播放的视频fileID 必须-->
<!--    appID: "1256980551", // 请传入点播账号的appID 必须-->
<!--    autoplay: false //是否自动播放-->
<!--    //其他参数请在开发文档中查看-->
<!--  });-->
<!--</script>-->
<!--{% endif %}-->
{% endblock %}